<template>
  <div class="login_right">
    <div class="login_title">
      注册你的毕设账户
      <div class="regisiter">
        已有账户？<span @click="goLogin">去登录</span>
      </div>
    </div>
    <el-form :model="formData" :rules="rules" ref="formData">
      <div class="inputBox">
        <el-form-item prop="userEmail">
          <el-input v-model="formData.userEmail" placeholder="请输入您的邮箱" />
        </el-form-item>
        <div class="email">
          <el-form-item prop="verificationCode">
            <el-input
              v-model="formData.verificationCode"
              class="verificationCode"
              placeholder="请输入您的邮箱验证码"
            />
          </el-form-item>
          <el-button
            class="emailBtn"
            @click="getEmailCode"
            :disabled="showEmileBtn"
            >{{ emailBtnText | timeFilter }}</el-button
          >
        </div>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="formData.password"
            class="password"
            placeholder="请输入您的密码"
            show-password
          />
        </el-form-item>
        <el-form-item prop="aginPassword">
          <el-input
            type="password"
            class="aginPassword"
            v-model="formData.aginPassword"
            placeholder="请再次输入您的密码"
            show-password
          />
        </el-form-item>
      </div>
      <el-button
        class="loginButton"
        type="primary"
        @click="register('formData')"
        >完成注册</el-button
      >
      <el-form-item prop="agree">
        <div class="footer">
          <div class="autoLogin">
            <input
              id="checkAgree"
              type="checkbox"
              v-model="formData.agree"
              class="checkbox"
            />
            <label for="checkAgree">
              <span class="checkboxLabel"
                >我已阅读并同意用户协议和隐私政策</span
              >
            </label>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { checkEmail, checkPassword, checkEmailcode } from "@/utils/user.utils";
import { sendEmailCode, userRegister } from "@/api/api";
export default {
  name: "RegisterBox",
  data() {
    // 校验用户邮箱格式
    const validatorUserEmail = (rule, value, callback) => {
      if (!checkEmail(value)) callback(new Error("请输入正确的邮箱格式"));
      callback();
    };
    // 校验用户邮箱验证码格式
    const validatorUserPassword = (rule, value, callback) => {
      if (!checkPassword(value))
        callback(
          new Error("请输入字母(大、小写均可)和数字组合且长度不短于6位的密码")
        );
      callback();
    };
    // 校验用户密码格式
    const validatorVerificationCode = (rule, value, callback) => {
      if (!checkEmailcode(value)) callback(new Error("验证码格式不正确"));
      callback();
    };
    // 校验用户两次密码是否一致
    const validatorUserPasswordAgain = (rule, value, callback) => {
      if (value !== this.formData.password)
        callback(new Error("与第一次输入的密码不一致"));
      callback();
    };
    // TODO:校验用户是否同意用户协议与隐私政策
    const validatorAgree = (rule, value, callback) => {
      if (!value) callback(new Error("请勾选同意用户协议和隐私政策"));
      callback();
    };
    return {
      // 获取邮箱验证码按钮是否可点击
      showEmileBtn: false,
      //获取邮箱验证码按钮上的文本
      emailBtnText: "获取邮箱验证码",
      // 是否同意隐私协议
      formData: {
        userEmail: "",
        verificationCode: "",
        password: "",
        aginPassword: "",
        agree: false,
      },
      rules: {
        userEmail: [
          { required: true, validator: validatorUserEmail, trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatorUserPassword, trigger: "blur" },
        ],
        verificationCode: [
          {
            required: true,
            validator: validatorVerificationCode,
            trigger: "blur",
          },
        ],
        aginPassword: [
          {
            required: true,
            validator: validatorUserPasswordAgain,
            trigger: "blur",
          },
        ],
        agree: [
          {
            required: true,
            trigger: "blur",
            validator: validatorAgree,
          },
        ],
      },
    };
  },
  filters: {
    //获取邮箱验证码按钮上的文本
    timeFilter(val) {
      if (typeof val === "number") {
        return val + "s";
      } else {
        return val;
      }
    },
  },
  methods: {
    goLogin() {
      this.$router.push("/login");
    },
    //获取邮箱验证码
    getEmailCode() {
      this.$refs.formData.validateField("userEmail", (err) => {
        if (err) return;
        const { userEmail } = this.formData;
        const data = {
          userEmail,
        };
        sendEmailCode(data).then((res) => {
          this.changeSendEmailBtn();
        });
      });
    },
    //TODO:清除计时器 改变发送邮件按钮状态
    changeSendEmailBtn() {
      this.showEmileBtn = true;
      this.emailBtnText = 30;
      const timer = setInterval(() => {
        if (this.emailBtnText === 0) {
          this.showEmileBtn = false;
          this.emailBtnText = "获取邮箱验证码";
          clearInterval(timer);
          return;
        }
        this.emailBtnText--;
      }, 1000);
    },
    //注册按钮
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const userData = {
            userEmail: this.formData.userEmail,
            password: this.formData.password,
            verificationCode: this.formData.verificationCode,
          };
          userRegister(userData).then((res) => {
            this.$router.push("login");
          });
        }
        return;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login_right {
  transform: translate(0px, 0px);
  opacity: 1;
  visibility: inherit;
  overflow: hidden;
  background: #fff;
  padding: 50px 50px;
  border-radius: 20px;
  .login_title {
    font-size: 36px;
    font-weight: 900;
    .regisiter {
      font-size: 16px;
      font-weight: 400;
      opacity: 0.7;
      span {
        color: #009dff;
        cursor: pointer;
      }
    }
  }
}
.inputBox {
  margin-top: 50px;
  text-align: left;
  .email {
    display: flex;
    justify-content: space-between;
    .verificationCode {
      margin-top: 6px;
      width: 184px;
    }
    .emailBtn {
      width: 140px;
      margin-top: 6px;
      height: 40px;
      letter-spacing: 1px;
      margin-left: 10px;
      color: #009dff;
      font-weight: 400;
    }
  }
  .aginPassword {
    margin-top: 6px;
  }
  .password {
    margin-top: 6px;
  }
}
.footer {
  font-size: 13px;
  color: #999;
  overflow: hidden;
  .autoLogin {
    float: left;
    vertical-align: middle;

    .checkbox {
      vertical-align: middle;
      cursor: pointer;
    }
    .checkboxLabel {
      cursor: pointer;
    }
  }
  .registOrForget {
    float: right;
    cursor: pointer;
  }
}
</style>